<!-- 使用方法
<mUpload action="attachemnt/upload"
	:data="{type: '0'}" 
	type="application/pdf" 
	@done="uploadDone">
	<a-button>上传PDF文档</a-button>	
</mUpload>

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
<mUpload action="unitUserInfo/uploadUnitFile"
  :data="{
    unitId: _d.form.id
  }"
  type="image"
  typeError="请上传图片文档"
  @done="uploadDone">
  <div class="file-img-btn">
    <div v-if="_d.fileImg" class="img-box">
      <div class="t-mask">
        <upload-outlined class="icon"/>
        <eye-outlined class="icon" @click.stop="showPreview()"/>
      </div>
      <img :src="_d.fileImg"/>
    </div>
    <div v-else class="text">+</div>
  </div>
</mUpload>
<div style="display: none;">
  <a-image
    :style="{ display: 'none' }"
    :preview="{
      visible: _d.preview.visible,
      onVisibleChange: val => _d.preview.visible = val
    }"
    :src="_d.preview.src"/>
</div>

import {UploadOutlined, EyeOutlined} from '@ant-design/icons-vue';

// 预览
preview: {
  visible: false,
  src: ''
},
// 上传文件
function uploadDone(res, info) {
	if(res.code == 200) {
		message.success('上传PDF成功');
		_d.form.fileList.file_name = res.data.old_file_name;
		_d.form.fileList.file_id = res.data.file_id;
	} else {
		message.error('上传PDF失败');
	}
}
function showPreview() {
  let params = {
    fileId: _d.form.unit_license_file_id
  }
  ApiPostImg("unitUserInfo/showUnitImg", params).then(res => {
    _d.preview.src = res;
    _d.preview.visible = true;
  }).catch((err) => {
    notification.error({
      message: '提示',
      description: '大图获取失败'
    })
  })
}

.file-img-btn {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px dashed #d7d7d7;
  font-size: 24px;
  text-align: center;
  line-height: 98px;
  &:hover {
    border-color: @primary-color;
    .img-box .t-mask {
      opacity: 1;
    }
  }
  .t-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .3s;
    font-size: 18px;
    .icon {
      cursor: pointer;
      &+.icon {
        margin-left: 15px;
      }
    }
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
}

 -->
<template>
  <div class="m-upload">
		<div v-if="!fileImg" class="new-box" @click="showChoice()">
			<div class="icon">+</div>
			<div>上传</div>
		</div>
		<div v-else class="img-box">
			<div class="img-mask">
        <upload-outlined class="icon" @click="showChoice()"/>
        <eye-outlined class="icon" @click="showPreview()"/>
      </div>
      <img :src="fileImg"/>
		</div>

		<input v-show="false" ref="fileRef" type="file" accept="image/png,image/jpeg" @change="fileChange"/>
    <div style="display: none;">
		  <a-image
	      :style="{ display: 'none' }"
	      :preview="{
	        visible: preview.visible,
	        onVisibleChange: val => preview.visible = val
	      }"
	      :src="preview.src"/>
	  </div>
	</div>
</template>

<script setup>
	import { reactive, ref, computed, useSlots } from 'vue'
	import { notification, message } from 'ant-design-vue';
	import {UploadOutlined, EyeOutlined} from '@ant-design/icons-vue';

	import axios from "axios";

	const props = defineProps({
		// 图片
		preview: {
			type: String
		},
		// 接口
		action: {
			type: String,
			default: ''
		},
		// 参数
		data: {
			type: Object
		},
	})


	// 文件
	const fileRef = ref();
	// 上传图片
	const fileImg = ref(props.preview || null);
	// 预览
	const preview = reactive({
		visible: false,
		src: ''
	})

	function fileChange() {
		let oFile = event.target;
		let files = oFile.files;
    if (!files.length) {
      return;
    }
    let file = files[0];
    oFile.value = '';

    // 图片验证
    // if(['image/png', 'image/jpeg'].indexOf(file.type) == -1) {
    // 	notification.error({
    // 		message: '提示',
    // 		description: "图片格式仅支持jpg\\jpeg\\png"
    // 	})
    // 	return;
    // }
    // 图片验证
    let arr = file.name.split('.');
    let suffix = arr[arr.length - 1];
    if(['png', 'jpg', 'jpeg'].indexOf(suffix) == -1) {
    	notification.error({
    		message: '提示',
    		description: "图片格式仅支持jpg\\jpeg\\png"
    	})
    	return;
    }

    // 大小验证
    if(file.size > 50*1024*1024) {
    	notification.error({
    		message: '提示',
    		description: "请选择小于50M的图片上传"
    	})
    	return;
    }

    getBase64(file, base64Url => {
    	fileImg.value = base64Url;
    })
    return;

    let formData = new FormData();
    formData.append('files', file);
    if(props.data) {
    	for(let key in props.data) {
    		formData.append(key, props.data[key]);
	    }
    }

    const instance = axios.create();

		instance({
			method: 'POST',
			url: props.action,
			data: formData,
			headers: {
				// "Authorization": "Bearer " + ls.get(TOKEN_ACCESS_KEY),
				'accepts': 'application/json',
				// "Load-Balancer": import.meta.env.VITE_APP_LOCAL_IP,
				'Content-Type':'multipart/form-data',
			}
		}).then(res => {
			if(res.data.code != 200) {
				notification.error({
	    		message: '提示',
	        description: res.data.message
	    	})
				return;
			}
			notification.success({
    		message: '提示',
        description: res.data.data
    	})
    	getBase64(file, base64Url => {
	    	fileImg.value = base64Url;
	    })
		})
	}

	function getBase64(img, callback) {
	  const reader = new FileReader();
	  reader.addEventListener('load', () => callback(reader.result));
	  reader.readAsDataURL(img);
	}

	// 显示选择
	function showChoice() {
		fileRef.value.click();
	}

	// 显示预览
	function showPreview() {
		preview.src = fileImg.value;
		preview.visible = true;
	}

</script>

<style lang="less" scoped>
.m-upload {
	width: 90px;
	height: 90px;
	border: 1px solid #E7E7E7;
	text-align: center;
	font-size: 14px;
	&:hover {
    .img-box .img-mask {
      opacity: 1;
    }
  }
	.new-box {
		height: 100%;
		background: #F6F6F6;
		cursor: pointer;
		color: #999999;
		.icon {
			padding: 5px 0;
			font-size: 40px;
			line-height: 40px;
			color: #2196F3;
		}
	}
	.img-box {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.img-mask {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background: rgba(0,0,0,.5);
	    color: #fff;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    opacity: 0;
	    transition: opacity .3s;
	    font-size: 18px;
	    .icon {
	      cursor: pointer;
	      &+.icon {
	        margin-left: 15px;
	      }
	    }
	  }
		img {
			max-width: 100%;
			max-height: 100%;
		}
	}
}
</style>